<script setup lang="ts">
import Card from "@/components/Card/index.vue";
import { textValue } from "@/utils/index";
import AppendButton from "@/components/AppendButton/Append.vue";
import Spin from "@/components/Spin/index.vue";
import { useScanStore } from "@/store";
import blank from "@/static/images/blank.png";

const uiConfig = {
	labelSpan: 6,
	valueSpan: 18,
};

const { missing } = useScanStore();

const props = defineProps<{
	showTitle?: boolean;
	type?;
}>();
const emits = defineEmits(["scan"]);

const tableLoading = ref(false);

const list = computed(() => missing.getList());
const boxNumber = computed(() => missing.getBox());
const mainOrderNumber = computed(() => missing.getMain());

// 删除
const handleDelete = (index) => {
	tableLoading.value = true;

	setTimeout(() => {
		const _d = list.value;
		_d.splice(index, 1);
		callbackUpdate(_d);
	}, 200);
};

// 添加
const handleAdd = () => {
	tableLoading.value = true;

	setTimeout(() => {
		const _d = list.value;
		_d.push("");
		callbackUpdate(_d);
	}, 200);
};

// 修改箱号
const handleChangeInput = (e, index) => {
	const _d = list.value;
	_d[index] = e;
	callbackUpdate(_d);
};

// 回显
const callbackUpdate = (val) => {
	missing.setList(val);
	tableLoading.value = false;
};

// 扫码排除
const handleScan = () => {
	emits("scan", {
		callback: () => {
			uni.navigateTo({ url: "/pages/missingScan/index" });

		}
	});
};
</script>

<template>
	<Card class="storage-card-container">
		<template v-if="props.showTitle">
			<view class="title">货物信息</view>
		</template>

		<wd-row class="row">
			<wd-col :span="uiConfig.labelSpan">总箱数</wd-col>
			<wd-col class="ellipsis-2" :span="uiConfig.valueSpan">{{
				textValue(boxNumber)
			}}</wd-col>
		</wd-row>

		<view class="row">
			<view class="left">
				缺件明细<text class="detail">({{ list.length }})</text>
			</view>

			<template v-if="props.type !== 'show'">
				<div class="right" @click="handleScan">使用扫码排除</div>
			</template>
		</view>

		<Spin :loading="tableLoading">
			<view class="cus-table">
				<view class="header table-row">
					<view class="left">箱号</view>

					<template v-if="props.type !== 'show'">
						<view class="right">操作</view>
					</template>
				</view>
				<view class="content">
					<template v-if="list.length > 0">
						<view v-for="(item, index) in list" class="table-row" :key="item">
							<view class="left">
								<template v-if="props.type !== 'show'">
									<wd-input :modelValue="item" @update:modelValue="(e) => handleChangeInput(e, index)" />
								</template>
								<template v-else>
									<view>{{ item }}</view>
								</template>
							</view>

							<template v-if="list.length > 0 && props.type !== 'show'">
								<view class="right" @click="() => handleDelete(index)">删除</view>
							</template>
						</view>

					</template>
					<template v-else>
						<view class="blank">
							<wd-img :src="blank" class="blank-img" />
							<view class="text">暂无数据</view>
						</view>
					</template>
					<view class="append" v-if="props.type !== 'show'">
						<AppendButton @click="handleAdd" />
					</view>
				</view>
			</view>
		</Spin>
	</Card>
</template>

<style lang="less" scoped>
@import url("../style/card.less");
@import url("../style/row.less");
@import url("../style/form.less");

.row {
	justify-content: space-between;

	.left {
		.detail {
			color: red;
		}
	}

	.right {
		color: #5aabfc;
	}
}

.blank {
	width: 50%;
	height: 300px;
	margin: 0px auto;
	padding-bottom: 100px;

	.blank-img {
		width: 100%;
		height: 100%;
	}

	.text {
		text-align: center;
		font-size: 35px;
		color: rgba(0, 0, 0, 0.45);
	}
}
</style>
